<!-- DOC: script to save and load page settings -->
<script>
    /**
     *	This script should be placed right after the body tag for fast execution 
     *	Note: the script is written in pure javascript and does not depend on thirdparty library
     **/
    'use strict';

    var classHolder = document.getElementsByTagName("BODY")[0],
        /** 
         * Load from localstorage
         **/
        themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
            {
                "themeOptions": "mod-bg-5", "themeURL": "css/themes/cust-theme-8.css"
            },
        themeURL = themeSettings.themeURL || '',
        themeOptions = themeSettings.themeOptions || '';
    /** 
     * Load theme options
     **/
    if (themeSettings.themeOptions) {
        classHolder.className = themeSettings.themeOptions;
        console.log("%c✔ Theme settings loaded", "color: #148f32");
    }
    else {
        console.log("Heads up! Theme settings is empty or does not exist, loading default settings...");
    }
    if (themeSettings.themeURL && !document.getElementById('mytheme')) {
        var cssfile = document.createElement('link');
        cssfile.id = 'mytheme';
        cssfile.rel = 'stylesheet';
        cssfile.href = themeURL;
        document.getElementsByTagName('head')[0].appendChild(cssfile);
    }
    /** 
     * Save to localstorage 
     **/
    var saveSettings = function () {
        themeSettings.themeOptions = String(classHolder.className).split(/[^\w-]+/).filter(function (item) {
            return /^(nav|header|mod|display)-/i.test(item);
        }).join(' ');
        if (document.getElementById('mytheme')) {
            themeSettings.themeURL = document.getElementById('mytheme').getAttribute("href");
        };
        localStorage.setItem('themeSettings', JSON.stringify(themeSettings));
    }
    /** 
     * Reset settings
     **/
    var resetSettings = function () {
        localStorage.setItem("themeSettings", "");
    }

</script>

<!-- BEGIN Page Settings -->
<div class="modal fade js-modal-settings modal-backdrop-transparent" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-right modal-md">
        <div class="modal-content">
            <div class="dropdown-header bg-trans-gradient d-flex justify-content-center align-items-center w-100">
                <h4 class="m-0 text-center color-white">
                    布局设置
                    <small class="mb-0 opacity-80">用户界面设置</small>
                </h4>
                <button type="button" class="close text-white position-absolute pos-top pos-right p-2 m-1 mr-2"
                    data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body p-0">
                <div class="settings-panel">
                    <div class="mt-4 d-table w-100 px-5">
                        <div class="d-table-cell align-middle">
                            <h5 class="p-0">
                                应用布局
                            </h5>
                        </div>
                    </div>
                    <!-- <div class="list" id="fh">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="header-function-fixed"></a>
                        <span class="onoffswitch-title">固定标头</span>
                        <span class="onoffswitch-title-desc">标头始终固定</span>
                    </div> -->
                    <div class="list" id="nff">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-function-fixed"></a>
                        <span class="onoffswitch-title">固定导航</span>
                        <span class="onoffswitch-title-desc">左侧面板固定</span>
                    </div>
                    <div class="list" id="nfm">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-function-minify"></a>
                        <span class="onoffswitch-title">缩小导航</span>
                        <span class="onoffswitch-title-desc">将导航偏小侧以最大化空间</span>
                    </div>
                    <div class="list" id="nfh">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-function-hidden"></a>
                        <span class="onoffswitch-title">隐藏导航</span>
                        <span class="onoffswitch-title-desc">将鼠标移动到边缘时显示</span>
                    </div>
                    <div class="list" id="nft">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-function-top"></a>
                        <span class="onoffswitch-title">顶部导航</span>
                        <span class="onoffswitch-title-desc">将左侧导航移到顶部</span>
                    </div>
                    <div class="list" id="mmb">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-main-boxed"></a>
                        <span class="onoffswitch-title">固定宽度</span>
                        <span class="onoffswitch-title-desc">固定内容区域显示宽度</span>
                    </div>
                    <div class="expanded">
                        <ul class="">
                            <li>
                                <div class="bg-fusion-50" data-action="toggle" data-class="mod-bg-1"></div>
                            </li>
                            <li>
                                <div class="bg-warning-200" data-action="toggle" data-class="mod-bg-2"></div>
                            </li>
                            <li>
                                <div class="bg-primary-200" data-action="toggle" data-class="mod-bg-3"></div>
                            </li>
                            <li>
                                <div class="bg-success-300" data-action="toggle" data-class="mod-bg-4"></div>
                            </li>
                        </ul>
                        <div class="list" id="mbgf">
                            <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                                data-class="mod-fixed-bg"></a>
                            <span class="onoffswitch-title">固定背景</span>
                        </div>
                    </div>
                    <div class="mt-4 d-table w-100 px-5">
                        <div class="d-table-cell align-middle">
                            <h5 class="p-0">
                                手机菜单
                            </h5>
                        </div>
                    </div>
                    <div class="list" id="nmp">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-mobile-push"></a>
                        <span class="onoffswitch-title">推送内容</span>
                        <span class="onoffswitch-title-desc">推送到菜单上的内容显示</span>
                    </div>
                    <div class="list" id="nmno">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-mobile-no-overlay"></a>
                        <span class="onoffswitch-title">无遮罩</span>
                        <span class="onoffswitch-title-desc">去掉显示菜单时的背景遮罩</span>
                    </div>
                    <div class="list" id="sldo">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="nav-mobile-slide-out"></a>
                        <span class="onoffswitch-title">侧滑内容 <sup>(beta)</sup></span>
                        <span class="onoffswitch-title-desc">内容区域跟随菜单滑入滑出</span>
                    </div>
                    <div class="mt-4 d-table w-100 px-5">
                        <div class="d-table-cell align-middle">
                            <h5 class="p-0">
                                辅助功能
                            </h5>
                        </div>
                    </div>
                    <div class="list" id="mbf">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-bigger-font"></a>
                        <span class="onoffswitch-title">内容字体放大</span>
                        <span class="onoffswitch-title-desc">放大显示内容字体以提高可读性</span>
                    </div>
                    <div class="list" id="mhc">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-high-contrast"></a>
                        <span class="onoffswitch-title">提高文字对比度 (WCAG 2 AA)</span>
                        <span class="onoffswitch-title-desc">4.5:1 文字对比度</span>
                    </div>
                    <div class="list" id="mcb">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-color-blind"></a>
                        <span class="onoffswitch-title">道尔顿主义 <sup>(beta)</sup> </span>
                        <span class="onoffswitch-title-desc">色觉不足</span>
                    </div>
                    <div class="list" id="mpc">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-pace-custom"></a>
                        <span class="onoffswitch-title">内置预加载器</span>
                        <span class="onoffswitch-title-desc">在内容中包含预加载器</span>
                    </div>
                    <div class="mt-4 d-table w-100 px-5">
                        <div class="d-table-cell align-middle">
                            <h5 class="p-0">
                                全局修改
                            </h5>
                        </div>
                    </div>
                    <div class="list" id="mcbg">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-clean-page-bg"></a>
                        <span class="onoffswitch-title">清除页面背景</span>
                        <span class="onoffswitch-title-desc">添加更多空白</span>
                    </div>
                    <div class="list" id="mhni">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-hide-nav-icons"></a>
                        <span class="onoffswitch-title">隐藏导航图标</span>
                        <span class="onoffswitch-title-desc">隐藏导航图标</span>
                    </div>
                    <div class="list" id="dan">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-disable-animation"></a>
                        <span class="onoffswitch-title">禁用css动画</span>
                        <span class="onoffswitch-title-desc">关闭基于css的动画效果</span>
                    </div>
                    <div class="list" id="mhic">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-hide-info-card"></a>
                        <span class="onoffswitch-title">隐藏信息卡片</span>
                        <span class="onoffswitch-title-desc">从左侧面板隐藏信息卡片</span>
                    </div>
                    <div class="list" id="mlph">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-lean-subheader"></a>
                        <span class="onoffswitch-title">副标题前倾</span>
                        <span class="onoffswitch-title-desc">有区别的页面标题</span>
                    </div>
                    <div class="list" id="mnl">
                        <a href="#" onclick="return false;" class="btn btn-switch" data-action="toggle"
                            data-class="mod-nav-link"></a>
                        <span class="onoffswitch-title">分层导航</span>
                        <span class="onoffswitch-title-desc">清晰的导航级别</span>
                    </div>
                    <div class="list mt-1">
                        <span class="onoffswitch-title">全局字号 <small>（刷新时重设）</small> </span>
                        <div class="btn-group btn-group-sm btn-group-toggle my-2" data-toggle="buttons">
                            <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-sm"
                                data-target="html">
                                <input type="radio" name="changeFrontSize"> 偏小
                            </label>
                            <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text"
                                data-target="html">
                                <input type="radio" name="changeFrontSize" checked=""> 中度
                            </label>
                            <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-lg"
                                data-target="html">
                                <input type="radio" name="changeFrontSize"> 偏大
                            </label>
                            <label class="btn btn-default btn-sm" data-action="toggle-swap" data-class="root-text-xl"
                                data-target="html">
                                <input type="radio" name="changeFrontSize"> 加大
                            </label>
                        </div>
                        <span class="onoffswitch-title-desc d-block mb-0">改变全局字号</span>
                    </div>
                    <hr class="mb-0 mt-4">
                    <div class="mt-2 d-table w-100 pl-5 pr-3">
                        <div class="d-table-cell align-middle">
                            <h5 class="p-0">
                                主题颜色
                            </h5>
                        </div>
                    </div>
                    <div class="expanded theme-colors pl-5 pr-3">
                        <ul class="m-0">
                            <li>
                                <a href="#" id="myapp-0" data-action="theme-update" data-themesave data-theme=""
                                    data-toggle="tooltip" data-placement="top" title="Wisteria (base css)"
                                    data-original-title="紫藤"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-1" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-1.css" data-toggle="tooltip" data-placement="top"
                                    title="织锦" data-original-title="织锦"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-2" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-2.css" data-toggle="tooltip" data-placement="top"
                                    title="亚特兰蒂斯" data-original-title="亚特兰蒂斯"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-3" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-3.css" data-toggle="tooltip" data-placement="top"
                                    title="靛蓝" data-original-title="靛蓝"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-4" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-4.css" data-toggle="tooltip" data-placement="top"
                                    title="道奇蓝" data-original-title="道奇蓝"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-5" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-5.css" data-toggle="tooltip" data-placement="top"
                                    title="季风" data-original-title="季风"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-6" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-6.css" data-toggle="tooltip" data-placement="top"
                                    title="蔓越莓" data-original-title="蔓越莓"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-7" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-7.css" data-toggle="tooltip" data-placement="top"
                                    title="奥斯陆灰" data-original-title="奥斯陆灰"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-8" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-8.css" data-toggle="tooltip" data-placement="top"
                                    title="切特沃德蓝" data-original-title="切特沃德蓝"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-9" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-9.css" data-toggle="tooltip" data-placement="top"
                                    title="杏黄" data-original-title="杏黄"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-10" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-10.css" data-toggle="tooltip" data-placement="top"
                                    title="蓝烟" data-original-title="蓝烟"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-11" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-11.css" data-toggle="tooltip" data-placement="top"
                                    title="绿烟" data-original-title="绿烟"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-12" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-12.css" data-toggle="tooltip" data-placement="top"
                                    title="蓝原野" data-original-title="蓝原野"></a>
                            </li>
                            <li>
                                <a href="#" id="myapp-13" data-action="theme-update" data-themesave
                                    data-theme="css/themes/cust-theme-13.css" data-toggle="tooltip" data-placement="top"
                                    title="翡翠绿" data-original-title="翡翠绿"></a>
                            </li>
                        </ul>
                    </div>
                    <hr class="mb-0 mt-4">
                    <div class="pl-5 pr-3 py-3 bg-faded">
                        <div class="row no-gutters">
                            <div class="col-6 pr-1">
                                <a href="#" class="btn btn-outline-danger fw-500 btn-block"
                                    data-action="app-reset">重新设置</a>
                            </div>
                            <div class="col-6 pl-1">
                                <a href="#" class="btn btn-danger fw-500 btn-block"
                                    data-action="factory-reset">恢复初始设置</a>
                            </div>
                        </div>
                    </div>
                </div> <span id="saving"></span>
            </div>
        </div>
    </div>
</div>
<!-- END Page Settings -->